<template>
  <div class="login">
    <div class="_bg"></div>
    <div class="_box">
      <div class="_top">
        <div class="_logo"></div>
        <div class="_title">
          <span>耕云设备健康云</span>
        </div>
      </div>
      <el-form class="_form" :model="form" :rules="rules" ref="form">
        <el-form-item class="_input" prop="user" :error="error.user">
          <el-input v-model="form.user" placeholder="帐号/手机号">
            <i slot="prefix" class="a-icon-user _icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item class="_input" prop="pwd" :error="error.pwd">
          <el-input
            :type="visibles.isShowPWD ? 'text' : 'password'"
            v-model="form.pwd"
            placeholder="密码"
          >
            <i slot="prefix" class="a-icon-lock _icon"></i>
            <i
              slot="suffix"
              :class="[
                '_icon',
                '_icon-pwd',
                visibles.isShowPWD ? 'a-icon-eye' : 'a-icon-eye-close'
              ]"
              @click="visibles.isShowPWD = !visibles.isShowPWD"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item class="_button">
          <el-row>
            <el-col :span="12">
              <el-button type="text">
                帐号注册
              </el-button>
            </el-col>
            <el-col :span="12">
              <div class="-rest">
                <el-button type="text">
                  忘记密码
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="_button">
          <el-popover
            placement="top"
            width="276"
            trigger="manual"
            v-model="visibles.isSelectCompany"
            popper-class="login_popover"
          >
            <el-row class="_title">
              <el-col :span="12">选择企业</el-col>
              <el-col :span="12" class="_close">
                <i class="a-icon-close" @click="visibles.isSelectCompany = false"></i>
              </el-col>
            </el-row>

            <template v-for="(company, i) in companies">
              <template v-if="i">
                <el-divider :key="i" class="_divider"></el-divider>
              </template>

              <el-button type="text" class="_company" :key="i" @click="login(company.id)">
                <i class="a-icon-home"></i>
                {{ company.company_name }}
              </el-button>
            </template>
            <el-button slot="reference" type="primary" class="-submit" @click="submitForm">
              登录
            </el-button>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { checkCompanies, doGoSNS } from '@/api/v1/login'
import { encrypt } from '@/crypto'
export default {
  name: 'Login',
  components: {},
  props: {},
  data() {
    return {
      visibles: {
        isShowPWD: false,
        isSelectCompany: false
      },
      error: {
        user: '',
        pwd: ''
      },
      form: {
        user: '',
        pwd: ''
      },
      reallyPWD: '',
      companies: [],
      rules: {
        user: { required: true, message: '请输入帐号/手机号', trigger: 'blur' },
        pwd: { required: true, message: '请输入密码', trigger: 'blur' }
      }
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    checkCompanies()
      .then(({ data, stopMessage }) => {
        console.log(data)
        stopMessage && stopMessage()
        this.$message.error('asdf')
      })
      .catch(({ err, stopMessage }) => {
        console.log(err)
        stopMessage && stopMessage()
      })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    triggerSubmitError(isErr) {
      if (isErr) {
        this.error.user = '帐号/手机号错误'
        this.error.pwd = '密码错误'
      } else {
        this.error.user = ''
        this.error.pwd = ''
      }
      // this.error.user ? (this.error.user = '') : (this.error.user = '帐号/手机号错误')
      // this.error.pwd ? (this.error.pwd = '') : (this.error.pwd = '密码错误')
    },
    selectCompany(id) {
      this.form.c_id = id
      this.login()
    },
    login(id) {
      const u = encrypt(this.form.user)
      const p = encrypt(this.form.pwd)
      doGoSNS({
        u,
        p,
        c_id: id
      }).then(({ data }) => {
        this.visibles.isSelectCompany = false
        if (data) {
          console.log(data)
        } else {
          this.triggerSubmitError(true)
        }
      })
    },
    submitForm() {
      this.triggerSubmitError()
      this.$refs.form.validate(valid => {
        if (valid) {
          const user = this.form.user
          checkCompanies({ user }).then(({ data }) => {
            if (data) {
              if (data.length) {
                if (data.length === 1) {
                  this.login(data[0].id)
                } else {
                  this.companies = data
                  this.visibles.isSelectCompany = true
                }
              }
            } else {
              this.triggerSubmitError(true)
            }
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss">
.login_popover {
  ._title {
    margin-bottom: 8px;
    ._close {
      text-align: right;
      & > i {
        cursor: pointer;
      }
    }
  }
  ._divider {
    margin: 1px 0;
  }
  ._company {
    width: 100%;
    position: relative;
    text-align: left;
    &::after {
      content: '\e856';

      font-family: 'iconfont';
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;

      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      position: absolute;
      right: 0;
    }
  }
}
@include web {
  .login {
    @include wh;
    position: relative;
    background-color: #333;
    ._bg {
      @include wh;
      @include img(
        (
          url: 'bg.jpg'
        )
      );
    }
    ._box {
      box-sizing: border-box;
      @include wh(400px, 360px, true);
      padding: 0 50px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
      box-shadow: 0px 0px 10px #99ccff;
      ._top {
        ._logo {
          height: 100px;
          @include img(
            (
              url: 'logo.png',
              size: contain
            )
          );
        }
        ._title {
          height: 50px;
          text-align: center;
          & > span {
            font-weight: bold;
            font-size: 22px;
            color: #333;
          }
        }
      }

      ._input {
        .el-input__prefix,
        .el-input__suffix {
          height: 32px;
        }
        ._icon {
          font-size: 15px;
          vertical-align: middle;
          &-pwd {
            color: #333;
            cursor: pointer;
          }
        }
      }
      ._button {
        .-rest {
          text-align: right;
        }

        .-submit {
          width: 100%;
        }
      }
    }
  }
}
</style>
